<!-- 筛选demo -->
<template>
    <div class="header-bar-search">
        <div class="header_search_bar clear">
            <div class="header_search_comback fl" @click="gotoback">
                <i class="iconfont icon-back_icon"></i>
            </div>
            <div class="header_search_center_search">              
                <span class="clear">
                    <i class="iconfont icon-sousuo fl"></i>
                    <input type="text" v-model="search" placeholder="搜索">
                    <i @click="clearClick" v-if="clearShow" class="iconfont icon-guanbi fr"></i>
                </span>
            </div>
            <div class="header_search_right fr">
                <button @click="handSearch()">{{search_sousuo}}</button>
            </div>
        </div>
        <div class="history_search_div" style="background-color:#fff;">
            <!-- 历史搜索 -->
            <div class="history_search" v-if="historyShow">
                <h3>历史搜索</h3>
                <ul>
                    <li v-for="(searchInput,ind) in searchs" :key="ind">
                        懒人沙发
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                search:'',
                historyShow: true,      //历史搜索结果显示
                clearShow: false,       //清除输入内容
                search_sousuo: '取消',   //取消聚焦为“取消”
                searchs: [{},{}],       //历史搜索结果   
            }
        },
        watch: {
            search(value) {
                if(value != '') {
                    this.search_sousuo = '搜索';
                    this.clearShow = true;          //清除输入内容
                }else {
                    this.search_sousuo = '取消';
                    this.historyShow = true;        //历史搜索结果显示
                    this.clearShow = false;         //清除输入内容
                }
            }
        },
        methods: {
            // 返回
            gotoback() {
                if(this.backFn){
                    this.backFn();
                }else {
                    if(this.$router){
                        this.$router.back();
                    }else {
                        window.history.back();
                    }
                }
            },
            // 点击搜索
            handSearch() {
                // 点击取消返回上一页
                if(this.search_sousuo == '取消') {
                    this.gotoback();
                    return;
                }
                if(this.search_sousuo == '搜索') {
                    // this.historyShow = false;
                    let search = this.search;
                    this.$emit('search',search);
                }
            },
            // 删除输入内容
            clearClick() {
                this.search = '';
            },
        },
    }
</script>

<style>
.header-bar-search {
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 12; */
}
/* 头部搜索 */
.header_search_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    height: .88rem;
    background-color: #fff;
}
/* 头部左边 */
.header_search_comback {
    height: 0.88rem;
    line-height: 0.88rem;
}
.header_search_comback .icon-back_icon {
    font-size: 0.48rem;
    color: #999 !important;
    text-align: left;
    line-height: 0.88rem;
    height: 0.88rem;
    padding-left: 0.1rem;
    box-sizing: border-box;
}
/* 头部中间 */
.header_search_center_search {
    width: 100%;
    font-size: .22rem;
    color: #999;
}
.header_search_center_search span {
    display: inline-block;
    width: 6rem;
    margin: 0 auto;
    margin-left: -0.58rem;
    margin-top: 0.17rem;
    height: 0.54rem;
    line-height: 0.54rem;
}
/* 搜索 */
.header_search_center_search span .icon-sousuo {
    position: relative;
    z-index: 10;
    text-align: left;
    margin: 0 0.1rem;
    font-size: 0.3rem !important;
    color: #999;
}
/* 删除 */
.header_search_center_search .icon-guanbi {
    position: relative;
    z-index: 10;
    text-align: right;
    margin: 0 0.1rem;
    font-size: 0.3rem;
    color: #999;
}
.header_search_center_search input {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6rem;
    height: 0.54rem;
    background-color: #f5f5f5;
    border: none;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 50%;
    margin-top: -0.27rem;
    left: 50%;
    margin-left: -3rem;
    border: 1px solid #d8d8d8;
    padding: 0 0.1rem 0 0.5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 0.54rem;
    font-size: 0.24rem;
    color: #333;
}
/* 头部右边 */
.header_search_right {
    height: 0.88rem;
    line-height: 0.88rem;
    font-size: 0.22rem;
    color: #999;
    margin-top: -0.78rem;
}
.header_search_right button {
    font-size: 0.22rem;
    color: #999;
    padding-right: 0.1rem;
    box-sizing: border-box;
}

/* 历史搜索 */
.history_search_div {
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    margin-top: 0.88rem;
}
.history_search {
    padding: 0.2rem 0.3rem;
}
.history_search h3 {
    font-size: 0.34rem;
    color: #999;
    text-align: left;
}
.history_search ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.2rem;
}
.history_search ul li {
    font-size: 0.22rem;
    color: #333;
    padding: 0 .3rem;
    float: left;
    margin-right: .1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    border: 1px solid #333;
    border-radius: 4px;
    height: 0.56rem;
    line-height: 0.56rem;
    text-align: center;
}

</style>